/***************************************************************************
 * General styles
 ***************************************************************************/

body
{
    color: #000;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    background: #ffffff url(../img/background.png) repeat;
    margin: 0;
}

a:link      {text-decoration: none; color:#443113; }
a:visited   {text-decoration: none; color:#443113; }
a:active    {text-decoration: none; color:#443113; }
a:hover     {text-decoration: none; color:goldenrod; }

h1, h2, h3 {
    color: #8B5B33;
    font-family: "Monotype Corsiva", cursive;
    margin-top: 2px;
}

.unselectable
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#header
{
    width: 100%;
    height: 60px;
    background: url(../img/bars/bar_header.png) repeat-x;
    background-size: auto 60px;
}

#headerLogo
{
    float: left;
    height: 100%;
}

#headerNote
{
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    height: 100%;
    text-align: right;
}

#footer
{
    width: 100%;
    height: 60px;
    background: url(../img/bars/bar_footer.png) repeat-x;
    background-size: auto 60px;
    margin-top: 50px;
    /*position: absolute;*/
    /*bottom: 0;*/
}

#centerBox
{
    margin: 20px auto 0 auto;
    width: 1000px;
    /*height: 820px;*/
}

#content
{
    margin-top: 20px;
    overflow:hidden;
}

/***************************************************************************
 * Character tab styles
 ***************************************************************************/

#tabCharacterLogo
{
    float: right;
    width: 200px;
}

#tabCharacterConfiguration
{
    float:left;
    width: 700px;
}

.customClassSpecializationBox { }

.customClassFavoredAttributesTable
{
    /*border-spacing: 5px;*/
    font-size: 12px;
}

.customClassFavoredAttribute { }

#customClassSkillsContainer
{
    position: relative;
}

.customClassSkillsTable
{
    float:left;
    margin: 20px 15px 10px 25px;
    /*border: 1px solid black;*/
    border-collapse: collapse;
}

.customClassSkillNameHeader
{
    width: 10em;
    border-bottom: 1px solid saddlebrown;
}

.customClassSkillCheckboxHeader
{
    text-align: center;
    font-size: 10px;
    border-bottom: 1px solid saddlebrown;
}

.customClassSkillName { }

.customClassSkillNameMod
{
    color: saddlebrown;
    font-weight: bold;
    font-style: italic;
}

.customClassSkillCheckbox
{
    text-align: center;
}

.customClassSettingsValid
{
    color: green;
}

.customClassSettingsInvalid
{
    color: red;
}

/***************************************************************************
 * Leveling tab styles
 ***************************************************************************/

#attributeDetailsBox
{
    float: left;
    margin-left: 0px;
    margin-right: 40px;
}

#skillDetailsBox
{
    float: left;
}

#characterDetailsBox
{
    float: right;
    width: 315px;
    border: 2px solid saddlebrown;
    border-radius: 15px;
    padding: 10px;
}

#characterDetailsBox td
{
    font-size: 11px;
}

.statTable
{
    /*border-spacing: 0;*/
    border-collapse: collapse;
    margin: 0 0 20px 0;
}

.statTable tr,td,input
{
    margin:0px;
}

.statTextBox
{
    margin: 0;
    padding: 0;
    text-align: center;
}

.statControls
{
    /*margin-left: 15px;*/
}

.skillName
{
    width: 125px;
}

.skillNameMajor
{
    font-weight: bold;
    width: 125px;
}

.attributeName
{
    width: 110px;
    text-align: center;
}

#levelProgressBar
{
    text-align: center;
    margin-top: 5px;
}

#statDetailsBox
{
    float: left;
    width: 600px;
    /*border: 2px solid saddlebrown;*/
    /*border-radius: 15px;*/
    /*padding: 0 0 0 15px;*/
}

#statDetailsTable
{
    border-spacing: 0 10px;
}

.statProgress
{
    width: 50px;
}

.attributeProgress
{
    font-weight: bold;
    color: green;
}

.attributeProgressOverleveled
{
    font-weight: bold;
    color: red;
}

.attributeProgressNonFocus
{
    font-weight: bold;
    color: darkorange;
}

.attributeIcon
{
    vertical-align: middle;
}

.attributeIcon img
{
    width: 25px;
}

.skillProgress
{

}
.skillProgressOverleved
{
    color: red;
}
